<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>设计癖</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            body{
                background-color: wheat;
            }
            header{
                height: 66px;
            }
            header h1{
                margin-top: 15px;
                float: left;
                width: 40px;
                height: 40px;
                font-size: 28px;
                line-height: 40px;
                text-align: center;
                background-color: #f00;
                border-radius: 50%;
                color: white;
                margin-left: 30px;
                margin-right: 100px;
            }
            header ul{
                float: left;
                margin-top: 15px;
            }
            header ul li{
                width: 35px;
                height: 35px;
                margin-right: 20px;
                line-height: 35px;
                text-align: center;
                background-color: #f00;
                border-radius: 50%;
                color: white;
                float: left;
                transform: rotate(-30deg);
            }
            header .login{
                margin-right: 100px;
                margin-top: 10px;
                padding: 5px 7px;
                float: right;
                background-color: #f00;
                border-radius: 5px;
            }
            header .login span{
                cursor: pointer;
                color: white;
            }
            .banner{
                width: 1212px;
                height: 512px;
                margin: 25px auto;
            }
            .banner .left{
                width: 910px;
                overflow: hidden;
                position: relative;
                float: left;
            }
            .banner .left ul{
                width: 4000px;
                transition: 1s;
            }
            .banner .left ul li{
                float: left;
            }
            .banner img{
                cursor: pointer;
                width: 910px;
            }
            .banner .left ol{
                position:absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 10px;
            }
            .banner .left ol li{
                cursor: pointer;
                width: 15px;
                height: 15px;
                background-color: #c2c2c2;
                float: left;
                margin: 0px 4px;
                border-radius: 50%;
            }
            .banner .left .current{
                background-color: #333;
            }
            .banner .right{
                float: right;
            }
            .banner .right ul li{
                position: relative;
            }
            .banner .right ul li img{
                width: 290px;
                height: 174px;
            }
            .banner .right ul li p{
                width: 290px;
                font-size: 13px;
                color: white;
                text-align: center;
                line-height: 25px;
                height: 25px;
                bottom: 4px;
                background-color: rgba(136, 136, 136, 0.548);
                position: absolute;
            }
            .list{
                width: 1212px;
                height: 36px;
                margin: 25px auto;
            }
            .list li{
                border-radius: 5px;
                border: 1px solid #f00;
                float: left;
                line-height: 38px;
                padding: 0 85px 0 12px;
                margin-right: 30px;
                cursor: pointer;
            }
            .con{
                width: 1212px;
                height: 965px;
                margin: 25px auto 0px;
            }
            .con dl{
                width: 292px;
                height: 310px;
                float: left;
                margin-right: 14px;
                margin-bottom: 15px;
                border-bottom: 1px solid #c2c2c2;
            }
            .con dl:nth-of-type(8+n){
                margin-bottom: 0px;
            }
            .con dl:nth-of-type(4n){
                margin-right: 0px;
            }
            .con dl img{
                width: 292px;
            }
            .con dl a{
                color: black;
                text-decoration: none;
            }
            .con dl a:hover{
                text-decoration: underline;
            }
            .con dl p{
                margin-top: 35px;
                color: #888;
            }
            .con dl span{
                margin-right: 130px;
            }
            .con dl small:nth-of-type(2){
                margin-left: 50px;
            }
            .move{
                 width: 1212px;
                 height: 38px;
                 margin: 0px auto;
                 text-align: center;
                 line-height: 38px;
            }
            .footer{
                width: 1212px;
                margin: 25px auto;
            }
            .footer p:nth-of-type(1){
                margin-bottom: 30px;
                font-size: 14px;
                color: #888;
            }
            .footer p:nth-of-type(3){
                margin-top: 30px;
                font-size: 14px;
                color: #888;
            }
            .footer img{
                margin-right: 30px;
            }
            .foot{
                height: 30px;
                background-color: rgb(2, 5, 66);
            }
            .foot .left a{
                line-height: 30px;
                float: left;
                margin-left: 20px;
                color: #9c9c9c;
                text-decoration: none;
                font-size: 13px;
            }
            .foot .left a:hover{
                text-decoration: underline;
            }
            .foot .right {
                line-height: 30px;
                color: #9c9c9c;
                font-size: 13px;
                float: right;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>PI</h1>
            <ul>
                <li>赞</li>
                <li>萌</li>
                <li>哈</li>
                <li>艹</li>
                <li>买</li>
            </ul>
            <div class="login">
                <span>登录</span>
            </div>
        </header>
        <div class="banner">
            <div class="left">
                <ul id="box">
                    <li>
                        <img src="images/s001.jpg" alt="">
                    </li>
                    <li>
                        <img src="images/s002.jpg" alt="">
                    </li>
                    <li>
                        <img src="images/s003.jpg" alt="">
                    </li>
                </ul>
                <ol id="index">
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
            <div class="right">
                <ul>
                    <li>
                        <img src="images/s02.jpg" alt="">
                        <p>想点亮圣诞气氛?试试这个[驯鹿]灯</p>
                    </li>
                    <li>
                        <img src="images/s03.jpg" alt="">
                        <p>Designer 100,100个设计师,100个故事</p>
                    </li>
                    <li>
                        <img src="images/s04.jpg" alt="">
                        <p>旧椅子获新生,还比以前更酷炫</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="list">
            <ul>
                <li>最新</li>
                <li>排行榜</li>
                <li>碰碰运气</li>
            </ul>
        </div>
        <div class="con">
            <dl>
                <dt>
                    <img src="images/i01.jpg" alt="">
                    <dd>
                        <a href="">用水能擦去笔记,它只想保护好设计师的创意</a>
                        <p>
                            <span>2小时前</span>
                            <small>122</small>
                            <small>2</small>
                        </p>
                    </dd>
                </dt>
            </dl>
            <dl>
                <dt>
                    <img src="images/i02.jpg" alt="">
                    <dd>
                        <a href="">用水能擦去笔记,它只想保护好设计师的创意</a>
                        <p>
                            <span>2小时前</span>
                            <small>122</small>
                            <small>2</small>
                        </p>
                    </dd>
                </dt>
            </dl>
            <dl>
                <dt>
                    <img src="images/i03.jpg" alt="">
                    <dd>
                        <a href="">用水能擦去笔记,它只想保护好设计师的创意</a>
                        <p>
                            <span>2小时前</span>
                            <small>122</small>
                            <small>2</small>
                        </p>
                    </dd>
                </dt>
            </dl>
            <dl>
                <dt>
                    <img src="images/i04.jpg" alt="">
                    <dd>
                        <a href="">用水能擦去笔记,它只想保护好设计师的创意</a>
                        <p>
                            <span>2小时前</span>
                            <small>122</small>
                            <small>2</small>
                        </p>
                    </dd>
                </dt>
            </dl>
            <dl>
                <dt>
                    <img src="images/i05.jpg" alt="">
                    <dd>
                        <a href="">用水能擦去笔记,它只想保护好设计师的创意</a>
                        <p>
                            <span>2小时前</span>
                            <small>122</small>
                            <small>2</small>
                        </p>
                    </dd>
                </dt>
            </dl>
            <dl>
                <dt>
                    <img src="images/i06.png" alt="">
                    <dd>
                        <a href="">用水能擦去笔记,它只想保护好设计师的创意</a>
                        <p>
                            <span>2小时前</span>
                            <small>122</small>
                            <small>2</small>
                        </p>
                    </dd>
                </dt>
            </dl>
            <dl>
                <dt>
                    <img src="images/i07.jpg" alt="">
                    <dd>
                        <a href="">用水能擦去笔记,它只想保护好设计师的创意</a>
                        <p>
                            <span>2小时前</span>
                            <small>122</small>
                            <small>2</small>
                        </p>
                    </dd>
                </dt>
            </dl>
            <dl>
                <dt>
                    <img src="images/i07.png" alt="">
                    <dd>
                        <a href="">用水能擦去笔记,它只想保护好设计师的创意</a>
                        <p>
                            <span>2小时前</span>
                            <small>122</small>
                            <small>2</small>
                        </p>
                    </dd>
                </dt>
            </dl>
            <dl>
                <dt>
                    <img src="images/i08.jpg" alt="">
                    <dd>
                        <a href="">用水能擦去笔记,它只想保护好设计师的创意</a>
                        <p>
                            <span>2小时前</span>
                            <small>122</small>
                            <small>2</small>
                        </p>
                    </dd>
                </dt>
            </dl>
            <dl>
                <dt>
                    <img src="images/i09.jpg" alt="">
                    <dd>
                        <a href="">用水能擦去笔记,它只想保护好设计师的创意</a>
                        <p>
                            <span>2小时前</span>
                            <small>122</small>
                            <small>2</small>
                        </p>
                    </dd>
                </dt>
            </dl>
            <dl>
                <dt>
                    <img src="images/i10.jpg" alt="">
                    <dd>
                        <a href="">用水能擦去笔记,它只想保护好设计师的创意</a>
                        <p>
                            <span>2小时前</span>
                            <small>122</small>
                            <small>2</small>
                        </p>
                    </dd>
                </dt>
            </dl>
            <dl>
                <dt>
                    <img src="images/i11.jpg" alt="">
                    <dd>
                        <a href="">用水能擦去笔记,它只想保护好设计师的创意</a>
                        <p>
                            <span>2小时前</span>
                            <small>122</small>
                            <small>2</small>
                        </p>
                    </dd>
                </dt>
            </dl>
        </div>
        <p class="move">太快了吧, 慢慢来</p>
        <div class="footer">
            <p>合作伙伴</p>
            <p>
                <img src="images/x01.png" alt="">
                <img src="images/x02.png" alt="">
                <img src="images/x03.png" alt="">
                <img src="images/x04.png" alt="">
                <img src="images/x05.png" alt="">
                <img src="images/x06.png" alt="">
                <img src="images/x07.png" alt="">
            </p>
            <p>友情链接</p>
        </div>
        <div class="foot">
            <ul class="left">
                <li>
                    <a href="">关于</a>
                    <a href="">合作</a>
                    <a href="">投稿</a>
                    <a href="">工业设计导航</a>
                    <a href="">站点地图</a>
                </li>
            </ul>
            <p class="right">
                © 2012-2021 设计癖 |  京ICP备15049021号  | 
            </p>
        </div>


        <script>
            var box = document.getElementById('box');
            var index = document.getElementById('index').children;
            var num=0;
            var timer;
            function imgMove(){
                num++;
                if(num>2){
                    num=0;
                }
                subscript();
                box.style.transform="translate("+(-910*num)+"px)";
            }
            function subscript(){
                for(var i=0;i<index.length;i++){
                    index[i].className='';
                }
                index[num].className='current';
            }
            for(var i=0;i<index.length;i++){
                index[i].tag=i;
                index[i].onclick=function(){
                    for(var j=0;j<index.length;j++){
                        index[j].className='';
                    }
                    this.className='current';
                    var k=this.tag;
                    box.style.transform="translate("+(-910*k)+"px)";
                }
            }
            timer=setInterval(imgMove,2000);

            box.onmouseenter=function(){
                clearInterval(timer);
            }
            box.onmouseleave=function(){
                timer=setInterval(imgMove,2000);
            }

        </script>
    </body>
</html>